<template>
	<view class="container container24934">
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
			<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex1-clz">
				<view class="flex diygw-col-7">
					<view class="diygw-avatar xl radius bg-none">
						<image mode="aspectFit" class="diygw-avatar-img radius" :src="avatar"></image>
					</view>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex2-clz">
				<u-form-item class="diygw-col-24" label="昵称" prop="input">
					<u-input :focus="inputFocus" class="" placeholder="请输入提示信息" v-model="input" type="text" readonly="true"></u-input>
				</u-form-item>
				<u-form-item class="diygw-col-24" label="性别" prop="radio">
					<u-radio-group class="flex flex-wrap diygw-col-24 justify-around" wrapClass=" justify-around" activeColor="#f37b1d" v-model="radio" @change="changeRadio">
						<u-radio shape="circle" v-for="(radioitem, radioindex) in radioDatas" :key="radioindex" :name="radioitem.value">
							{{ radioitem.label }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item class="diygw-col-24" label="年龄" prop="input1">
					<u-input :focus="input1Focus" class="" placeholder="请输入提示信息" v-model="input1" type="text"></u-input>
				</u-form-item>
				<u-form-item class="diygw-col-24" label="电话" prop="input2">
					<u-input :focus="input2Focus" class="" placeholder="请输入提示信息" v-model="input2" type="text"></u-input>
				</u-form-item>
				<u-form-item class="diygw-col-24" label="邮箱" prop="input3">
					<u-input :focus="input3Focus" class="" placeholder="请输入提示信息" v-model="input3" type="text"></u-input>
				</u-form-item>
				<u-form-item class="diygw-col-24" label="地址" prop="input4">
					<u-input :focus="input4Focus" class="" placeholder="请输入提示信息" v-model="input4" type="text"></u-input>
				</u-form-item>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex3-clz">
			<view class="flex diygw-col-22">
				<button class="diygw-btn grey radius-xl flex-sub margin-xs button-button-clz" @click="save()">保存</button>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				inputFocus: false,
				input: '',
				radioDatas: [
					{ value: '1', label: '帅哥', checked: true },
					{ value: '2', label: '美女', checked: false }
				],
				radio: '1',
				input1Focus: false,
				input1: '',
				input2Focus: false,
				input2: '',
				input3Focus: false,
				input3: '',
				input4Focus: false,
				input4: '',
				avatar:'',
				dataraws:{},
				id:0
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}
			this.avatar = option.avatar
			this.input = option.nickname
			this.init();
		},
		methods: {
			async init() {
				this.resultApi()
			},
			async resultApi(){
				const header={
					"Token":uni.getStorageSync('token')
				}
				const http_url = '/user/getUserInfo'
				const result =await this.$http.get(http_url,'',header)
				const code = result.code
				if(code==200){
					const data = result.data
					this.radio = data.sex=='男'?1:2
					this.input1 = data.age
					this.input2 = data.telephone
					this.input3 = data.email
					this.input4 = data.address
					this.id = data.id
				}
				console.log(result)
			},
			async save(){
				const data={
					'id':this.id,
					'sex':this.radio==1?'男':'女',
					'age':this.input1,
					'telephone':this.input2,
					'email':this.input3,
					'address':this.input4
				}
				const header={
					'content-type': 'application/json;charset=UTF-8',
				}
				const http_url = '/user'
				const result =await this.$http.put(http_url,data,header)
				const code = result.code
				if(code==200){
					uni.showToast({
						title: '保存成功',
						icon: 'success',
						duration: 2000
					});
				}
				console.log(result)
			},
			
			changeRadio(evt) {}
		}
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex1-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 10rpx;
	}
	.flex2-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 10rpx;
	}
	.flex3-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 10rpx;
	}
	.button-button-clz {
		margin: 6rpx !important;
	}
	.container24934 {
		padding-left: 0px;
		padding-right: 0px;
	}
	.container24934 {
	}
</style>
